<template>
  <div class="login-form-container">
    <a-form ref="formRef" :model="formState" layout="horizontal" class="login-form">
      <a-form-item
        label="账号"
        name="userAccount"
        :rules="[
          { required: true, message: '请输入用户名' },
          { max: 20, message: '最多只能输入20个字符' },
        ]"
      >
        <!-- name属性与这里的 一致 绑定数据 -->
        <a-input v-model:value="formState.userAccount" />
      </a-form-item>
      <a-form-item
        label="密码"
        name="userPassword"
        :rules="[
          { required: true, message: '请输入密码' },
          { max: 20, message: '最多只能输入20个字符' },
        ]"
      >
        <a-input-password v-model:value="formState.userPassword" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space>
          <a-button type="primary" @click="handleLogin">登录</a-button>
          <a-button type="primary">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Login from '@/api/login';
import { message } from 'ant-design-vue';
const token = ref();
const router = useRouter();
const formRef = ref(null);
const formState = ref({
  userAccount: '',
  userPassword: '',
});
const userName = ref('');
const handleLogin = async () => {
  try {
    await formRef.value.validateFields();
    const res = await Login.userLogin(formState.value);
    // debugger;
    console.log(res);
    token.value = res.data.data.tokenValue;

    if (res.data.code === 100200) {
      // 存储token
      localStorage.setItem('token', token.value);

      router.push({ path: '/main' });

      message.success('登录成功');
    }
    // else {
    //   message.error('登录失败');
    // }
  } catch (error) {
    message.error(error);
  }
};
</script>

<style scoped>
.login-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: url('../../components/image/logo.jpg') no-repeat center center;
  background-size: cover;
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover; */
  width: 100%;
}

.login-form {
  background-color: aliceblue;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
